<template>
  <div class="manangeDiv" v-if="isVisable">
    <div class="topDiv">
      <div>
        <el-icon><Notification /></el-icon>
        组件管理控制面板
      </div>
      <el-button type="danger" size="mini" @click="closeWin">关闭</el-button>
    </div>
    <div style="padding: 10px; box-sizing: border-box">
      <el-tabs type="border-card">
        <el-tab-pane label="组件添加">
          <div
            style="
              display: flex;
              flex-wrap: wrap;
              gap: 10px;
              width: 100%;
              flex-direction: row;
              align-content: flex-start;
            "
          >
            <div
              v-for="(item, index) in mainComponents"
              :key="index"
              class="itemDiv"
              :style="item.containerStyle"
            >
              <div class="itemDivInner">
                <div class="chartStyle">
                  <div :style="item.chartStyle">
                    <component :is="item.comp" />
                  </div>
                </div>
                <div class="chartBgStyle">
                  <component :is="item.componentBg" />
                </div>
              </div>
              <div class="itemDivBts">
                <el-button type="primary" size="mini">添加</el-button>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="组件删除">组件删除</el-tab-pane>
      </el-tabs>
      <div
        style="
          background-color: #fff;
          min-height: 50px;
          text-align: center;
          padding: 10px;
          box-sizing: border-box;
        "
      >
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[4, 10, 100, 200]"
          :small="small"
          :disabled="disabled"
          :background="background"
          layout="total, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted, type PropType, toRaw, watch } from "vue";
import { Notification } from "@element-plus/icons-vue";
import { AnimationDelayCallback, number } from "echarts";

const small = ref(false);
const background = ref(false);
const disabled = ref(false);
const currentPage = ref(1);
const pageSize = ref(4);

let emits = defineEmits(["sizeChange", "pageChange"]);

const handleSizeChange = (val: number) => {
  //console.log(`${val} items per page`);
  emits("sizeChange", val);
};
const handleCurrentChange = (val: number) => {
  //console.log(`current page: ${val}`);
  emits("pageChange", val);
};

let isVisable = ref(true);
const props = defineProps({
  componentMap: {
    type: Array,
    required: true,
  },
  pageNumber: {
    type: Number,
    requeird: true,
  },
  size: {
    type: Number,
    requeird: true,
  },
  total: {
    type: Number,
    requeird: true,
  },
});

const mainComponents = ref<any[]>([]);

async function loadComponent(componentName: string) {
  try {
    const component = newList.value.find((c) => c.name === componentName);
    if (component) {
      const item = await component.component();
      const itemBg = await component.componentBg();
      const containerStyle = component.containerStyle;
      const chartStyle = component.chartStyle;
      const position = component.position;
      return {
        comp: item.default,
        componentBg: itemBg.default,
        containerStyle,
        chartStyle,
        position,
      };
    }
    throw new Error(`Component ${componentName} not found`);
  } catch (error) {
    console.error(`加载组件 ${componentName} 失败:`, error);
    return null;
  }
}

// 添加组件到左侧区域
async function addComponent(componentName: string) {
  const item = await loadComponent(componentName);
  if (item) {
    mainComponents.value.push(item);
  }
}

const closeWin = () => {
  isVisable.value = false;
};

function createComponentMap(components) {
  let newList = components.map((comp) => ({
    index: comp.zj.index,
    name: comp.zj.name,
    componentBg: () => import(/* @vite-ignore */ comp.zj.bgPath),
    component: () => import(/* @vite-ignore */ comp.zj.path),
    containerStyle: comp.zj.containerStyle,
    chartStyle: comp.zj.chartStyle,
    position: comp.zj.position,
  }));
  // console.log("newListaaaaaaaa", newList);

  return newList;
}

let newList = ref([]);

watch(
  () => [...props.componentMap], //这里式使用直接导入的
  async (newVal, oldVal) => {
    mainComponents.value = []; // 先清空现有组件
    newList.value = createComponentMap(newVal);
    newList.value = newList.value.sort((a, b) => a.index - b.index);
    console.log("newLista", newList.value);

    // 使用for...of循环按顺序等待每个组件加载
    for (const component of newList.value) {
      await addComponent(component.name);
    }
  },
  { immediate: true }
);

watch(
  () => props.pageNumber, // 此处是函数形式，带响应式的
  (newVal, oldVal) => {
    currentPage.value = newVal;
  },
  { immediate: true }
);

watch(
  () => props.size,
  (newVal, oldVal) => {
    pageSize.value = newVal;
  },
  { immediate: true }
);
</script>
<style scoped>
.chartStyle {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.chartBgStyle {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
}
.topDiv {
  background-color: #f5f5f5;
  border-bottom: 1px solid #ccc;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.itemDiv {
  margin: 10px;
  padding: 10px;
  /* background-color: #f5f5f5; */
  box-sizing: border-box;
  /* width: calc(50% - 30px); */
  border: 1px solid #9e9e9e;
}
.itemDivInner {
  width: 100%;
  height: calc(100% - 35px);
  overflow: hidden;
  position: relative;
}
.itemDivBts {
  display: flex;
  align-items: center;
  gap: 10px;
  border-top: 1px solid #dbdbdb;
  justify-content: flex-end;
  padding: 5px;
  box-sizing: border-box;
}

.manangeDiv {
  position: fixed;
  width: 1300px;
  height: 100vh;
  background-color: #e6e6e6;
  right: 0;
  top: 0;
  z-index: 1000;
}
</style>
